<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <ul>
      <li>
        <div class="img">
          <span>头像</span>
          <input
            id="file"
            accept="image/*"
            @change="chooseImg"
            type="file"
            style="display: none"
          />
          <label for="file" class="iconfont">
            <van-image
              width="45px"
              height="45px"
              round
              :src="userInfo.avatar"
            />
          </label>

          <span>
            <!-- <van-icon name="arrow" /> -->
          </span>
        </div>
      </li>
      <li>
        <van-field
          v-model="userInfo.nickname"
          label="昵称"
          right-icon="arrow"
        />
      </li>
      <li>
        <van-field
          readonly
          clickable
          label="性别"
          :value="userInfo.sex"
          @click="showPicker = true"
          right-icon="arrow"
        />
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm1"
          />
        </van-popup>
      </li>
      <li>
        <van-field
          readonly
          clickable
          label="生日"
          :value="userInfo.birthday"
          @click="show = true"
          right-icon="arrow"
        />
        <van-popup v-model="show" round position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            @confirm="onConfirm"
            @cancel="show = false"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
      </li>
    </ul>
    <button @click="getuser">确定</button>
  </div>
</template>

<script>
import { Field } from "vant";
import { Image as VanImage } from "vant";
import { Picker } from "vant";
import { Popup } from "vant";
import { Cell, CellGroup, DatetimePicker } from "vant";
import { Calendar } from "vant";
export default {
  name: "WorkspaceJsonUser",
  components: {
    [Field.name]: Field,
    [DatetimePicker.name]: DatetimePicker,
    [VanImage.name]: VanImage,
    [Calendar.name]: Calendar,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
  },
  data() {
    return {
      showPicker: false,
      columns: ["男", "女"],
      show: false,
      userInfo: {},
      minDate: new Date(1970, 1, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2022, 8, 4),
    };
  },

  mounted() {},
  created() {
    this.gainuser();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 获取用户信息
    gainuser() {
      this.token = localStorage.getItem("token");
      // console.log(this.token);
      this.$http
        .post("/user/getuserInfo", {
          token: this.token,
        })
        .then((res) => {
          console.log(res);
          this.$root.userInfo = res.userInfo;
          this.userInfo = res.userInfo;
          console.log(this.$root.userInfo.nickname);
        });
    },
    // 性别
    onConfirm1(value) {
      this.userInfo.sex = value;
      this.showPicker = false;
    },
    // 日期
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      // this.currentDate= this.userInfo.birthday
      this.userInfo.birthday = this.formatDate(date);
    },
    // 头像
    getUploadToken() {
      return this.$http.get(
        "https://d33a5037-6c63-4e92-8bb1-30018ab701ea.bspapp.com/http/upload/token"
      );
    },

    // 选择图片事件
    async chooseImg(e) {
      console.log();

      //  选择完就上传

      let file = e.target.files[0];
      console.log(file);
      //  先去申请一个token
      try {
        let { token } = await this.getUploadToken();

        console.log(token);

        //  file  token  和文件名 一起发给七牛云的服务器
        let exname = file.name.slice(file.name.lastIndexOf(".") + 1);
        let key = `${new Date().getTime()}_${Math.random()
          .toString(36)
          .slice(2)}.${exname}`;
        let formData = new FormData();

        formData.append("token", token);
        formData.append("file", file);
        formData.append("key", key);
        this.$http
          .post("https://upload-z1.qiniup.com", formData)
          .then((res) => {
            console.log(res);
            this.userInfo.avatar = `http://toutiao.longxiaokj.com/` + res.key;
            console.log(this.userInfo.avatar);
            this.$forceUpdate();
          });
      } catch (error) {
        console.log(error);
        this.$toast(error);
      }
    },
    // 修改信息
    getuser() {
      let { avatar, nickname, sex, birthday } = this.userInfo;
      this.uid = localStorage.getItem("uid");
      this.$http
        .post("/user/editUserInfo", {
          avatar,
          nickname,
          sex,
          birthday,
          uid: this.uid,
        })
        .then((res) => {
          console.log(res);
          this.$toast.success(res.msg);
          setTimeout(() => {
            this.$router.go(-1);
          }, 500);
          localStorage.setItem("userInfo", JSON.stringify(this.$root.userInfo));
        });
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  padding: 0 0 0 15px;
  li {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid pink;
  }
}
// 头像
.dataLists > div {
  position: relative;
  font-size: 17px;
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 1px solid #ccc;

  &::after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    background: #ccc;
    height: 1px;
    content: "";
  }

  .iconfont {
    font-size: 38px;
  }
  span {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    color: rgb(222, 222, 222);
  }
  input {
    width: 220px;
    text-align: right;
    color: #333;
    line-height: 36px;
    height: 36px;
  }
  input::placeholder {
    color: #aaa;
  }
  .type {
    width: 150px;
    overflow: auto;
    display: inline-block;
    white-space: nowrap;
    text-align: right;
  }
}
.img {
  float: right;
  padding-right: 21px;
  padding-left: 13px;
  margin-top: 6px;
  span {
    float: left;
    font-size: 15px;
    color: #5f5f5f;
    display: inline-block;
    padding-right: 249px;
  }
}
button {
  width: 90%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  margin: 0 19px;
  margin-top: 30px;
  background-color: rgb(55, 165, 244);
  border: none;
  border-radius: 16px;
}
</style>